<template>
  <div class="tag-input" :style="{ gap: gap }">
    <el-tag class="tag-style" v-for="(tag, index) in tags" :key="index" :closable="!readOnly"
      :disable-transitions="true" :type="tagType" :size="size" @close="handleClose(index)"
      :style="{ height: tagHeight, lineHeight: tagHeight, fontSize: fontSize }" @click="handleClick(index)">
      {{ tag }}
    </el-tag>
    <el-input v-if="!readOnly && inputVisible" class="new-tag-input" :style="{ width: inputWidth, height: inputHeight }"
      v-model="inputValue" ref="newTagInput" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
    </el-input>
    <el-button v-if="!readOnly && !inputVisible" class="new-tag-btn" :style="{ width: inputWidth, height: btnHeight }"
      :class="{ 'el-icon-plus': buttonContent === '+' }" @click="showInput">
      {{ buttonContent === '+' ? '' : buttonContent }}
    </el-button>
  </div>
</template>

<script>
export default {
  name: 'TagInput',
  props: {
    value: {
      type: Array,
      default: () => []
    },
    size: {
      type: String,
      default: '' // medium / small / mini
    },
    fontSize: {
      type: String,
      default: '12px'
    },
    buttonContent: {
      type: String,
      default: '+ new tag'
    },
    tagType: {
      type: String,
      default: '' // success / info / warning / danger
    },
    readOnly: {
      type: Boolean,
      default: false
    },
    height: {
      type: String,
      default: ''
    },
    inputWidth: {
      type: String,
      default: '100px'
    },
    gap: {
      type: String,
      default: '10px'
    }
  },
  components: {},
  data() {
    return {
      inputVisible: false,
      inputValue: ''
    }
  },
  computed: {
    tags() {
      return this.value
    },
    tagHeight() {
      if (this.height !== '') {
        return this.height
      } else {
        return this.size2Height(this.size)
      }
    },
    btnHeight() {
      if (this.height !== '') {
        return this.height
      } else {
        return this.size2Height(this.size)
      }
    },
    inputHeight() {
      if (this.height !== '') {
        return this.height
      } else {
        return this.size2Height(this.size)
      }
    }
  },
  watch: {},
  methods: {
    size2Height(size) {
      const map = {
        mini: '20px',
        small: '24px',
        medium: '28px'
      }
      if (Object.keys(map).includes(size)) {
        return map[size]
      } else {
        return '32px'
      }
    },
    handleClick(index) {
      this.$emit('item-click', index)
    },
    handleClose(index) {
      this.tags.splice(index, 1)
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick(() => {
        this.$refs.newTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm() {
      if (this.inputValue) {
        this.tags.push(this.inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    }
  },
  beforeCreate() { },
  created() { },
  beforeDestroy() { },
  destroyed() { }
}
</script>

<style lang="scss" scoped>
.tag-style {
  cursor: pointer;
}

.tag-input {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.new-tag-btn {
  padding-top: 0;
  padding-bottom: 0;
  border-style: dashed;
}

.new-tag-input {
  display: inline-flex;

  ::v-deep {
    .el-input__inner {
      height: 100%;
      line-height: 100%;
    }
  }
}
</style>
